import React from 'react';
import { View } from '@tarojs/components';
import { AtAvatar } from 'taro-ui';
import moment from 'moment';
import ZbSeparator from '../Separator';

interface ZbRankProps {
  data: any[];
}
const ZbRank = (props: ZbRankProps) => {
  const { data } = props;

  return (
    <View className="p-2 shadow-lg bg-white">
      {data.map((it: any, idx: number) => (
        <View>
          <View key={it.id} className="grid grid-cols-9 items-center justify-center pb-10px">
            <View className="col-span-1 rounded-full h-8 w-8 flex items-center justify-center bg-red-600 text-white text-xs">{idx + 1}</View>
            <View className="col-span-3 flex items-center">
              <AtAvatar size="small" circle image={it.userAvatar} />
              <View className="text-xs pl-10px truncate">{it.userName}</View>
            </View>
            <View className="col-span-2 text-purple-800 text-lg text-right">{it.score}秒</View>
            <View className="col-span-3 text-gray-400 text-sm text-right">{moment(it.createTime).format('YYYY-MM-DD HH:mm:ss')}</View>
          </View>
          {idx < data.length - 1 && (
            <View className="pb-1">
              <ZbSeparator height={1} bgColor="#F5F3FF" />
            </View>
          )}
        </View>
      ))}
      {data.length === 0 && (
        <View className="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500 text-center p-4">暂无排名</View>
      )}
    </View>
  );
};

export default ZbRank;
